<template>
  <div class="htmlItem">
    <div class="headerone">
      <div class="headertwo">
        <van-icon class="headericon" @click="$router.go(-1)" name="arrow-left" />
      </div>

      <div class="headerthree">
        <span
          @click="changeItem(index)"
          v-for="(item, index) in spanlist"
          :key="item.id"
          :class="{ bgk: index == flag }"
          >{{ item.goodsname }}
          <van-icon  :name="item.name" />
        </span>
      </div>

      <div class="headertwo">
        <span class="headerlogin"><van-icon name="ellipsis" /></span>
      </div>
    </div>

    <div>
      <div class="detailheader">
        <div class="headerpone">
          <p class="p-one">{{ list.name }}</p>
          <p class="p-two">{{ list.subtitle }}</p>
        </div>
        <div class="totle">
          <span class="totle-one">{{ list.price }}</span>
          <span class="totle-two">库存{{ list.stock }}件</span>
        </div>
      </div>
      <div class="listItem">
        <ul>
          <li>概括</li>
          <li>参数</li>
          <li>安装服务</li>
          <li class="lione">常见问题</li>
        </ul>
        <div class="wrap" v-html="list.detail"></div>
      </div>
    </div>
  </div>
</template>
         

<script>
import { Locale } from 'vant';
export default {
  created() {
    // this.scroll();
    this.getItem();
  },
  data() {
    return {
      spanlist: [
        { id: 1, goodsname: "商品", name: "location" },
        { id: 2, goodsname: "商品详情", name: "location" },
        { id: 3, goodsname: "商品推荐", name: "location" },
      ],
      list: [],
      flag: 0,
      index: 0,
    };
  },
  methods: {
    // dispatch:['getItem',this.list],
    //滚动加红色
    // scroll() {
    //   window.addEventListener("load", function () {
    //     var bgk = this.document.querySelector(".header-home");
    //     window.addEventListener("scroll", function () {
    //       if (window.scrollY >= 70) {
    //         bgk.backgroundColor = "red";
    //         bgk.zIndex = 99;
    //       } else {
    //         bgk.backgroundColor = "";
    //       }
    //     });
    //   });
    // },
    changeItem(index) {
      this.flag = index;
    },
    async getItem() {
      // console.log(this.$route.params.id);
      const dataId=this.$route.params.id
      // console.log(dataId);
      const res = await this.$require({
        url: "/product/detail",
        method: "get",
        params:{
          id:dataId
        }
      });
      // console.log(dataId);
      if (res.status == 200) {
        this.list = res.data.data;
        // console.log(this.list);
      }
    },
    showPopup() {
      this.show = true;
    },
  },
};
</script>
<style lang="scss" scoped>
// .wrap {
//   /deep/ img: {
//     width: 375px;
//     height: 378px;
//   }
// }
::v-deep .wrap {
  img {
    width: 375px;
    height: 378px;
  }
}

// .wrap>>>img{
//     width: 375px;
//     height: 378px;
// }

.headerone {
  width: 375px;
  height: 24px;
  padding: 10px;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  .headertwo {
    flex: 1;
    .headericon {
      font-size: 25px;
      opacity: 0.5;
    }
    .headerlogin {
      font-size: 25px;
      // padding-left: 30px;
    }
  }
  .headerthree {
    flex: 6;
    text-align: center;
    span {
      line-height: 100%;
      padding: 0px 14px;
      font-size: 14px;
    }
  }
  .tab {
    width: 225.8px;
    height: 43px;
  }
  .bgk {
    color: #000000;
    color: red;
  }
}

.detailheader {
  padding: 10px 15px;
  .headerpone {
    width: 345px;
    .p-one {
      color: #333333;
      font-size: 20px;
      padding: 0;
      margin: 0;
    }
    .p-two {
      color: #999999;
      font-size: 14px;
      padding: 0;
      margin: 0;
    }
  }
}
.totle {
  width: 345px;
  height: 45px;
  padding: 5px;
  .totle-one {
    color: #f63515;
    font-size: 22px;
  }
  .totle-two {
    color: #999999;
    font-size: 16px;
    // padding-left: 100px;
    margin-left: 200px;
  }
}
.listItem {
  ul {
    display: flex;
    li {
      flex: 1;
      color: 15px;
      color: #000000;
      padding: 5px 0;
      text-align: center;
      border-right: 1px solid #000000;
    }
    .lione {
      border: none;
    }
  }
}
</style>